<script>
import {createProps} from '@/utils';
import SearchFieldRegistry from '@comp/hhd/design/FormField/SearchFieldRegistry';
import {AuthType} from '@comp/hhd/design/Constants';

export default {
  name: 'RelationSelectorSearchFormItem',
  props: {
    searchConfig: createProps(Object, () => ({
      fieldConfig: {}, searchConfig: {}
    })),
    searchModel: createProps(Object, () => undefined),
  },
  render(h) {
    return h('div', {class: 'relation-selector-search-item'}, [
      this.renderLabel(h),
      this.renderInput(h),
    ]);
  },
  methods: {
    renderLabel(h) {
      return h('div', {class: 'relation-selector-search-item-label'}, [this.label]);
    },
    renderInput(h) {
      return h('div', {class: 'relation-selector-search-item-input-wrapper'}, [this.renderInputComponent(h)]);
    },
    renderInputComponent(h) {
      if (!this.searchModel) return undefined;
      let component = this.componentName && SearchFieldRegistry[this.componentName] || undefined;
      if (component) {
        return h(component, {
          props: {
            fieldConfig: this.searchConfig.fieldConfig,
            value: this.searchModel[this.searchConfig.fieldConfig.id],
            title: this.searchModel[`${this.searchConfig.fieldConfig.id}_title`],
            auth: AuthType.edit,
            size: 'small'
          },
          on: {
            'update:value': v => this.searchModel[this.searchConfig.fieldConfig.id] = v,
            'update:title': v => this.searchModel[`${this.searchConfig.fieldConfig.id}_title`] = v,
          }
        });
      }
    },
  },
  computed: {
    componentName() {
      try {
        return this.searchConfig.fieldConfig.component;
      } catch (e) {
      }
      return undefined;
    },
    label() {
      try {
        return this.searchConfig.searchConfig.label || this.searchConfig.fieldConfig.label;
      } catch (e) {
      }
      return undefined;
    },
  }
};
</script>
<style>
.relation-selector-search-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  margin-bottom: 10px;
}

.relation-selector-search-item-label:after {
  content: ':';
  margin: 0 5px;
}
.relation-selector-search-item-label {
  text-align: right;
  user-select: none;
  padding-left: 10px;
}

.relation-selector-search-item-input-wrapper > * {
  width: 100%;
  min-width: 200px;
}
</style>